<!doctype html>
<html>
<head>
	<title>Custom search filter</title>
	<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

	<script src="../../codebase/webix/webix.js" type="text/javascript"></script>
	<script src="../../codebase/spreadsheet.js" type="text/javascript"></script>
	<script src="../../../webix/sources/core/i18n/ru.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="../../codebase/webix/webix.css">
	<link rel="stylesheet" type="text/css" href="../../codebase/spreadsheet.css">
	
	<script src="../common/data.js"></script>

</head>
<body>
	<script type="text/javascript">
		
		
			
		var elements = [			
			{
				view:"text", id:"input", placeholder:'Type here to search...',
				on:{onTimedKeyPress:function(){			
					filter();
				}}
			},
			{}
		];		

	
		webix.ready(function(){
			webix.ui({
				view:"spreadsheet", id:"ss",
				columnCount:15,					
				subbar:{
					view:"toolbar", css:"webix_ssheet_toolbar", elements:elements
				},				
				data:base_data				
			});	
			
			
			function equals(a,b){
			
				a = a? a.toString().toLowerCase():"";
				
				return a.indexOf(b) !== -1;
			}

			filter = function(){			
				var text = $$('ss').$$('input').getValue().toLowerCase();			
				if (!text) return $$('ss').$$('cells').filter();
				
				$$('ss').$$('cells').filter(function(obj){
					var n = $$('ss').$$('cells').config.columns.length;							
					for (var i = 1; i < n; i++){
						if (equals(obj[i], text)) return true;
						console.log(obj[i]);						
					}
					return false;											
				});
			};								
		});
	</script>
</body>
</html>